<template>
  <div class="product-page">
    <div class="product-list">
      <el-row :gutter="20">
        <el-col
            :xs="24" :sm="12" :md="8" :lg="6"
            v-for="(item, index) in searchProductArr"
            :key="index"
        >
          <el-card
              class="product-card"
              shadow="hover"
              @click.native="viewProductDetail(item)"
          >
            <div class="image-wrapper">
              <img
                  :src="item.imageUrls || 'https://via.placeholder.com/300x200?text=No+Image'"
                  class="product-image"
                  alt="商品图片"
              >
            </div>
            <div class="product-content">
              <h3 class="product-name">{{ item.name }}</h3>
              <div class="price-stock">
                <span class="price">¥{{ item.price.toFixed(2) }}</span>
                <span class="stock">{{ item.stock }}件库存</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import {useRoute, useRouter} from 'vue-router';
import { watch } from 'vue';

const router = useRouter();
const route = useRoute();

//定义保存商品数据的数组
const searchProductArr = ref([]);
const productName = route.query.name;



// 查看商品详情
const viewProductDetail = (product) => {
  // 这里可以跳转到商品详情页，或者打开详情弹窗
  router.push({
    path: '/product/detail',
    query: { id: product.id }
  });

  // 或者打开弹窗
  // openProductDialog(product);
};

//定义加载上架商品的方法
const loadProduct = () => {
  axios.get(BASE_URL+'/api/v1/product/search?name='+route.query.name).then((response)=>{
    if (response.data.code == 2000){
      //ElMessage.success('商品加载成功');
      searchProductArr.value = response.data.data.map(item => ({
        ...item,
        price: Number(item.price) || 0,
        stock: Number(item.stock) || 0
      }));
    }else {
      ElMessage.error(response.data.msg);
    }
  }).catch(error => {
    ElMessage.error('没有该商品');
  });
}

// 监听路由变化
watch(
    () => route.query.name,
    async (productName) => {
      if (productName) {
        searchProductArr.value = await loadProduct();
      }
    },
    { immediate: true }
);

//已进入页面自动加载
// onMounted(()=>{
//   loadProduct();
// })

</script>

<style scoped>
.product-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-list {
  margin-top: 20px;
}

.product-card {
  width: 100%;
  height: 350px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer; /* 添加手型光标 */
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(6, 7, 8, 0.1);
}

.image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.price-stock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.stock {
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .product-card {
    height: 320px;
  }

  .image-wrapper {
    height: 180px;
  }
}

/*轮播图样式*/
.app-main {
  flex: 1;
  padding: 0;
  background-color: #f8f9fa;
}

.app-footer {
  height: auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  padding: 40px 0 20px;
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.link-column {
  flex: 1;
  padding: 0 15px;
}

.link-column h4 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.link-column .el-link {
  display: block;
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.link-column .el-link:hover {
  color: #409EFF;
}

.contact-info p {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.contact-info .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  color: #999;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .header-content {
    flex-wrap: wrap;
    padding: 10px;
    height: auto;
  }

  .logo-area, .search-area, .user-actions {
    width: 100%;
    margin: 10px 0;
    justify-content: center;
  }

  .nav-links {
    display: none;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .link-column {
    flex: 0 0 50%;
    margin-bottom: 20px;
  }
}

.app-main {
  padding: 0;
}

.banner-container {
  width: 100%;
  margin-bottom: 20px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.5s;
}

.banner-image:hover {
  transform: scale(1.02);
}

.banner-title {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 4px;
}

/* 轮播图指示器样式 */
:deep(.el-carousel__indicator) {
  padding: 12px 4px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .banner-container {
    margin-bottom: 10px;
  }

  :deep(.el-carousel) {
    height: 200px !important;
  }

  .banner-title {
    font-size: 16px;
    bottom: 20px;
  }
}
</style>